﻿/**
 *
 * ━━━━━━神兽出没━━━━━━
 * 　　　┏┓　　　┏┓
 * 　　┏┛┻━━━┛┻┓
 * 　　┃　　　　　　　┃
 * 　　┃　　　━　　　┃
 * 　　┃　┳┛　┗┳　┃
 * 　　┃　　　　　　　┃
 * 　　┃　　　┻　　　┃
 * 　　┃　　　　　　　┃
 * 　　┗━┓　　　┏━┛Code is far away from bug with the animal protecting
 * 　　　　┃　　　┃    神兽保佑,代码无bug
 * 　　　　┃　　　┃
 * 　　　　┃　　　┗━━━┓
 * 　　　　┃　　　　　　　┣┓
 * 　　　　┃　　　　　　　┏┛
 * 　　　　┗┓┓┏━┳┓┏┛
 * 　　　　　┃┫┫　┃┫┫
 * 　　　　　┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

/**
 * 详情页组件
 * last update time 2016/3/21
 * 描述：简单详情页自动生成
 * 功能：1.页面布局根据传入参数自动生成
 *       2.根据参数自动获取数据并填充
 *       3.一个返回按钮根据参数跳转
 * 实例：查看下方注释内容
 */

;
(function ($, window, document, undefined) {
    "use strict";

    // 详情页模板
    var viewTemplate = ''
        + '    <!-- page start-->'
        + '    <div class="col-xs-12">'
        + '        <section class="panel panel-primary">'
        + '            <header class="panel-heading">'
        + '                <i class="fa fa-search"></i>'
        + '                <slot name="header"><span>详情</span></slot>'
        + '            </header>'
        + '            <div class="panel-body">'
        + '                <form class="form-horizontal" role="form" id="myForm">'
        + '                    <div class="form-body">'
        + '                        <!--/row-->'
        + '                        <div class="row">'
        + '                            <template v-for="item in config.items">'
        + '                                <div class="col-md-6">'
        + '                                    <div class="form-group">'
        + '                                        <label class="control-label col-md-3" v-text="item.name+\':\'"></label>'
        + '                                        <div class="col-md-9">'
        + '                                            <p class="form-control-static" id="item.id" v-text="model[item.id]"></p>'
        + '                                        </div>'
        + '                                    </div>'
        + '                                </div>'
        + '                                <template v-if="($index+1)%2===0">'
        + '                        </div>'
        + '                        <!--/row-->'
        + '                        <div class="row">'
        + '                        </template>'
        + '                    </template>'
        + '            </div>'
        + '    </div>'
        + '    <div class="form-actions">'
        + '        <div class="row">'
        + '            <div class="col-md-offset-4 col-md-8">'
        + '                <button id="btnReturn" type="button" class="btn btn-warning" v-on:click="jumpToList"><i class="fa fa-reply"></i>返回</button>'
        + '            </div>'
        + '        </div>'
        + '    </div>'
        + '</form>'
        + '</div>'
        + '</section>'
        + '</div>'
        + '<!-- page end-->';

    // 注册组件
    Vue.component('view-component', {
        // 模板
        template: viewTemplate,

        // 显式的声明props，接收父组件传递的数据
        props: {
            config: {
                type: Object,
                required: true
            }
        },

        // 子组件数据源
        data: function () {
            return {
                model: {}
            }
        },

        // 生命周期-创建后
        created: function () {
            this.getModel();
        },

        // 方法
        methods: {

            // 显示等待动画
            showWaitAnimation: function (bool) {
                if (bool) {
                    myUtil.blockUI({
                        target: this.formName,
                        message: '加载中，请稍等...'
                    });
                } else {
                    myUtil.unblockUI(this.formName);
                }
            },

            // 获取数据
            getModel: function () {
                var self = this;
                self.showWaitAnimation(true);
                $.when($.ajax({
                    url: self.config.handlerUrl,
                    type: 'post',
                    data: {
                        action: 'detail',
                        id: self.config.id
                    },
                    dataType: 'json'
                })).done(function (responseData) {
                    self.model = responseData;
                }).fail(function () {
                    toastr.warning('数据获取失败！');
                }).always(function () {
                    self.showWaitAnimation(false);
                });
            },

            // 返回按钮跳转到列表页
            jumpToList: function () {
                window.self.location.href = this.config.listUrl;
            }
        }
    });

})(jQuery, window, document);

/**
 * 使用实例
 */
// html中以自定义元素的形式使用
// <!-- page start-->
// <view-component v-bind:config="config">
//     <span slot="header">用户详情</span>
// </view-component>
// <!-- page end-->

// // 实例化
// var vm = new Vue({
//     el: '#content',
//     data: {
//         config: {
//             items: [
//                 {
//                     id: 'userName',
//                     name: '用户姓名'
//                 },
//                 {
//                     id: 'age',
//                     name: '年龄'
//                 },
//                 {
//                     id: 'telehpone',
//                     name: '电话'
//                 },
//
//             ],
//             id: myUtil.getUrlParam('id'),
//             handlerUrl: 'handler/userHandler.ashx',
//             listUrl: 'user_list_vue_component.aspx?state=has',
//             formName: '#myForm'
//         }
//     }
// });